<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CSS Base</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
    <link rel="stylesheet" href="../assets/css/main.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <script src="../../build/yui/yui-min.js"></script>
</head>
<body>

<div id="doc">
    <h1>CSS Base</h1>

    
        <a href="#toc" class="jump">Jump to Table of Contents</a>
    

    <div class="yui3-g">
        <div id="main" class="yui3-u">
            <div class="content">				<div class="intro" class="component">
                					
				  <p>CSS Base is an optional CSS file that complements YUI's core CSS foundation (<a href="../cssreset/">CSS Reset</a> and <a href="../cssfonts/">CSS Fonts</a>). CSS Base applies a style foundation for HTML elements that is consistent for <a href="http://developer.yahoo.com/yui/articles/gbs">baseline browsers</a>.</p>
					<p>CSS Base may also be useful as a template for your own base file, or a snippets library for styling HTML elements.</p>
							
				</div><!-- /promo -->
				
				<h2 id="start">Getting Started</h2>

				<h3 id="dependencies">Include Dependencies</h3>
				
				<p>To use CSS Base, include the following source file in your web page:</p>

<pre class="code prettyprint">&lt;link rel=&quot;stylesheet&quot; type=&quot;text&#x2F;css&quot; href=&quot;http:&#x2F;&#x2F;yui.yahooapis.com&#x2F;3.4.1&#x2F;build&#x2F;cssbase&#x2F;cssbase-min.css&quot;&gt;</pre>

				<h3 id="context">Global vs. Contextual</h3>
				
				<p>YUI's CSS resources apply rules to HTML elements directly (using <a href="http://www.w3.org/TR/CSS21/selector.html#type-selectors">type selectors</a>). An alternate version of the resource is available that target elements by context only. This contextual <code>-context.css</code> version selects HTML elements only when they descend from the <code>.yui3-cssbase</code> classname.</p>
				
				<p>Here is how to include the contextual version of CSS Base:</p> 
				
<pre class="code prettyprint">&lt;link rel=&quot;stylesheet&quot; type=&quot;text&#x2F;css&quot; href=&quot;http:&#x2F;&#x2F;yui.yahooapis.com&#x2F;3.4.1&#x2F;build&#x2F;cssbase-content&#x2F;cssbase-context-min.css&quot;&gt;</pre>

				<h2 id="using">Using CSS Base</h2>

				<h3 id="start-in-context">Using CSS Base In Specific Contexts</h3>				
		
				<p>If you're using the contextual version, CSS Base's rules are only applied to elements that descend from a node with a class value of <code>.yui3-cssbase</code>. The classname can go as high in the DOM tree as desired, including on the <code>HTML</code> element directly.</p>
			
				<p>The following code snippet show how you might apply CSS Base to one of two columns:</p>
										
<pre class="code prettyprint">&lt;div&gt;
	&lt;div id=&quot;left-column&quot; class=&quot;yui3-cssbase&quot;&gt;&lt;h1&gt;Lorem Ipsum&lt;&#x2F;h1&gt;&lt;&#x2F;div&gt;
	&lt;div id=&quot;right-column&quot;&gt;&lt;h1&gt;Lorem Ipsum&lt;&#x2F;h1&gt;&lt;&#x2F;div&gt;
&lt;&#x2F;div&gt;</pre>


</div>
        </div>

        <div id="sidebar" class="yui3-u">
            
                <div id="toc" class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Table of Contents</h2>
                    </div>

                    <div class="bd">
                        <ul class="toc">
<li>
<a href="#start">Getting Started</a>
<ul class="toc">
<li>
<a href="#dependencies">Include Dependencies</a>
</li>
<li>
<a href="#context">Global vs. Contextual</a>
</li>
</ul>
</li>
<li>
<a href="#using">Using CSS Base</a>
<ul class="toc">
<li>
<a href="#start-in-context">Using CSS Base In Specific Contexts</a>
</li>
</ul>
</li>
</ul>
                    </div>
                </div>
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                                    <li data-description="When CSS Base is included in a page it provides consistent and basic cross-browser styling for HTML elements.">
                                        <a href="cssbase-basic.html">Global (Page-Level) Example</a>
                                    </li>
                                
                            
                                
                                    <li data-description="CSS Base applied to a portion of a page based on the location of a class value.">
                                        <a href="cssbase-context.html">Contextual Example</a>
                                    </li>
                                
                            
                                
                            
                                
                            
                        </ul>
                    </div>
                </div>
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples That Use This Component</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                            
                                
                            
                                
                                    <li data-description="When CSS Reset is included in a page, it removes the browser-provided styling for HTML elements.">
                                        <a href="../cssreset/cssreset-basic.html">Global (Page-Level) Example</a>
                                    </li>
                                
                            
                                
                                    <li data-description="CSS Reset applied to a portion of a page based on the location of a class value.">
                                        <a href="../cssreset/cssreset-context.html">Contextual Example</a>
                                    </li>
                                
                            
                        </ul>
                    </div>
                </div>
            
        </div>
    </div>
</div>

<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>

</body>
</html>
